<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <!-- <demo></demo> -->
        <!-- 2. 添加变换的 html 结构 -->
        <section>
            <section @click="handleClick('demo')">demo</section>
            <section @click="handleClick('demo1')">demo1</section>
            <section @click="handleClick('demo2')">demo2</section>
        </section>
        <!-- 1. 通过 component 绑定了 组件名称  componentId  -->
        <!-- <keep-alive :max="3">
          <component v-bind:is="componentId"></component>
        </keep-alive> 
        https://cn.vuejs.org/v2/api/#keep-alive
      -->
          <component v-bind:is="componentId"></component>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    Vue.component("demo",{
        destroyed() {
          console.log("demo 组件被销毁");
        },
        template:`<section>组件模板一</section>`
    })
    Vue.component("demo1",{
        destroyed() {
          console.log("demo1 组件被销毁");
        },
        template:`<section>组件模板二</section>`
    })
    Vue.component("demo2",{
        destroyed() {
          console.log("demo2 组件被销毁");
        },
        template:`<section>组件模板三</section>`
    })
    let vm = new Vue({
      el: "#app",
      data:{
        componentId:"demo",
      },
      methods: {
          /* 3. 动态切换 组件名称 */
        handleClick:function(id){
            this.componentId = id;
        }
      },
    });
  </script>
</html>
